import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { EChart, Table } from 'components';
import { NavBar, Icon, WhiteSpace, WingBlank, List, Picker, ActivityIndicator } from 'antd-mobile';

import styles from './style.less';

// const { Item } = List;
// const { Brief } = Item;

const index = ({ chartDetail, dispatch, loading }) => {
  const { currentMeasure, parseData, option, isTop } = chartDetail;

  const { reporterType, measureList, ReprotName, parentDimensionValue = [] } = parseData;

  const pickerValue = currentMeasure || (measureList[0] && measureList[0].key);

  // 副标题
  const subtitleText = `${parentDimensionValue[0] || ''}${parentDimensionValue[1] || ''}`;
  const subtitle = subtitleText ? `${subtitleText}的数据` : '';
  // 选择度量
  const onSelectMeasureChange = ([newMeasure]) => {
    if (newMeasure !== currentMeasure) {
      dispatch({
        type: 'chartDetail/onSelectMeasureChange',
        payload: {
          currentMeasure: newMeasure,
        },
      });
    }
  };

  // 点击 图表
  const onChartClick = event => {
    dispatch({
      type: 'chartDetail/chartPress',
      payload: event,
    });
  };
  // 点击 表格
  const onTableRowPress = row => {
    dispatch({
      type: 'chartDetail/onTableRowPress',
      payload: row,
    });
  };

  // chatbox的高度
  // let chartBoxMinHiehgt = this.chartBoxMinHiehgt;
  const goBack = () => {
    dispatch({ type: 'chartDetail/goBack' });
  };
  const navBarProps = {
    mode: 'dark',
    className: styles['nav-bar'],
    onLeftClick: goBack,
    icon: isTop ? <Icon size="lg" type="left" /> : <Icon size="lg" type="cross" />,
  };
  return (
    <div className={styles['chart-detail']}>
      <NavBar {...navBarProps}>{subtitle || ReprotName}</NavBar>
      <div className={styles.body}>
        <WhiteSpace size="md" />
        <div className={styles['update-time']}>
          <WingBlank size="sm">
            <span>数据最后更新时间: {moment().format('YYYY-MM-DD')}</span>
          </WingBlank>
        </div>
        <WhiteSpace size="md" />

        {option &&
          (reporterType === 'table' ? (
            <div className={styles['table-box']}>
              <Table {...option} onRowPress={onTableRowPress} />
            </div>
          ) : (
            <WingBlank size="sm">
              <div className={styles['chart-box']}>
                <EChart option={option} onClick={onChartClick} type={reporterType} />
                <List className={styles['chart-info-list']}>
                  <Picker
                    onChange={onSelectMeasureChange}
                    value={pickerValue && [pickerValue]}
                    data={[measureList.map(e => ({ value: e.key, key: e.key, label: e.label }))]}
                    cascade={false}
                    cols={1}
                  >
                    <List.Item className={styles['select-measure']} arrow="horizontal">
                      度量
                    </List.Item>
                  </Picker>
                </List>
              </div>
              <WhiteSpace size="xs" />
            </WingBlank>
          ))}

        <ActivityIndicator toast text="加载中..." animating={loading} />
      </div>
    </div>
  );
};

export default connect(({ app, chartDetail }) => ({ chartDetail, loading: app.loading }))(index);
